<template>
    <div id="login">
        <div class="title">
            <p class="name"> D A K A R 物 联 网 能 耗 管 理 平 台</p>
            <p class="translate">DAKAR THINGS ENERGY MANAGEMENT PLATFORM</p>
        </div>
        <div class="login">
            <div class="loginBox">
                <div class="loginTitle">
                    <span>用户登录</span>
                    <i>USER LOGLN</i>
                </div>
                <div class="infor">
                    <div class="user public ">
                        <img src="../assets/image/parent-line.png" alt="">
                        <input ref="input" @keydown.enter="login" placeholder="请输入用户帐号" v-model="userName">
                    </div>
                    <div class="pass public">
                        <img src="../assets/image/forbid-2-fill.png" alt="">
                        <input type="password" @keydown.enter="login" placeholder="请输入登录密码" v-model="password">
                    </div>
                    <div class="verification public">
                        <img src="../assets/image/share-forward-line.png" alt="" class="head">
                        <input maxlength="4" @keydown.enter="login" placeholder="请输入验证码" v-model="code">
                    </div>
                    <div class="code" id="code"></div>
                </div>
                <div class="xuanze">
                    <el-checkbox v-model="checked">记住用户名</el-checkbox>
                    <p class="renovation" @click="check_code.refresh()">刷新验证码</p>
                </div>
                <el-button type="primary" class="button" @click="login">登录</el-button>
            </div>
        </div>
        <div class="bottom">
            Copyright © 2006-2020 DAKAR物联网能耗管理平台 站长统计
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import '../assets/js/verify';
    export default {
        data() {
            return {
                checked:true,
                check_code:{},
                code:'',
                userName:localStorage.userName || '',
                password:'',
            }
        },
        mounted() {
            this.$refs.input.focus();
            this.check_code=new GVerify("code");
            this.check_code.refresh();//刷新验证码
        },
        methods: {
            login() {
                let load=this.$loading({lock: true});
                if(!this.userName || !this.password){
                    load.close();
                    this.$message.error('账号密码不能为空');
                    return ;
                }
                if(!this.check_code.validate(this.code)){
                    load.close();
                    this.$message.error('验证码错误，请确认后重输！');
                    return ;
                }
                this.$axios.login.login({userName:this.userName,password:this.password}).then(v=>{
                    load.close();
                    if(v.code==200){
                        if(this.checked){
                            localStorage.userName=this.userName;
                        }else{
                            localStorage.removeItem('userName');
                        }
                        localStorage.token=v.data.token;
                        this.$router.replace('/index')
                    }else{
                        this.$message.error(v.message);
                    }
                })
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    #login {
        background: url("../assets/image/BJ.png") no-repeat center /cover;
        text-align: center;
        .title {
            padding-top: 80px;
            font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
            color: white;

            .name {
                font-size: 40px;
            }

            .translate {
                font-size: 16px;
                margin-top: 15px;
                color: rgb(240, 241, 243);
            }
        }

        .login {
            display: flex;
            justify-content: center;
            margin-top:50px;

            .loginBox {
                position: relative;
                background: url("../assets/image/box@2x.png")no-repeat center;
                margin-top: 40px;
                width: 400px;
                height: 400px;
                background-size: 125% 125%;
                padding: 30px 40px;

                .infor {
                    img {
                        width: 25px;
                        height: 25px;
                        margin: 0 20px 0 25px;
                    }

                    input {
                        width: 70%;
                        height: 70%;
                        background: rgba(0, 0, 0, 0);
                        color: #fff;
                        border: 0;
                        outline: none;
                        &::placeholder{
                            color: rgb(53, 84, 121);
                            font-weight: bold;
                        }
                    }

                    .public {
                        background: url("../assets/image/Input .png") no-repeat center;
                        height: 55px;
                        display: flex;
                        align-items: center;
                    }
                }

                .user {
                    margin-top: 50px;
                }

                .pass {
                    margin-top: 5px;
                }

                .verification {
                    float: left;
                    width: 180px;
                    height: 55px;
                    background-position: center center;
                    margin: 5px 0 0 17px;

                    .head {
                        width: 25px;
                        height: 25px;
                        margin: 0 17px 0 9px;
                    }
                }

                .code {
                    float: right;
                    margin: 9px 17px 0 0;
                    width: 95px;
                    background: url("../assets/image/Input .png") no-repeat center;
                    height: 47px;
                }

                .xuanze {
                    float: left;
                    margin: 10px 0 0 20px;

                    .renovation {
                        float: right;
                        margin-left: 120px;
                        font-size: 14px;
                        color: rgb(159, 165, 172);
                        cursor: pointer;
                    }

                    .el-checkbox__inner {
                        background: rgb(159, 165, 172);
                        border-color: rgb(159, 165, 172);

                        &::after {
                            border: 2px solid black;
                            border-left: 0;
                            border-top: 0;
                            text-align: center;
                        }
                    }

                    .el-checkbox__label {
                        color: rgb(154, 157, 162);
                    }
                }

                .loginTitle {
                    color: rgb(64, 176, 244);
                    float: left;
                    font-size: 25px;
                    font-weight: bold;

                    i:last-child {
                        font-size: 12px;
                        margin-left: 10px;
                        color: rgb(48, 118, 159);
                    }
                }
            }
        }

        .button {
            margin-top: 10px;
            width: 90%;
            height: 50px;
        }

        .el-button--primary {
            background: rgb(34, 161, 222);
            border-radius: 0;
            border-color: rgb(34, 161, 222);
        }

        .bottom {
            color: rgb(197, 198, 200);
            font-size: 14px;
            display: flex;
            justify-content: center;
            position: fixed;
            bottom: 50px;
            left: 0;
            right: 0;

            margin: 0 auto;
        }
    }
</style>
